<template>
	<view :class="['qn-page-' + theme]">
		<!-- 顶部导航 -->
		<view class="topTabBar" :style="{ position: headerPosition, top: headerTop }">
			<view class="grid" v-for="(grid, tbIndex) in orderType" :key="tbIndex" @click="showType(tbIndex, grid.status)">
				<view class="text" :class="[tbIndex === tabbarIndex ? 'on primary-btn-pain' : '']">{{ grid.label }}</view>
			</view>
		</view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<view class="list">
				<Aempty text="亲, 您还没有订单信息哦～～" src="../../static/empty/order.png" v-if="!order_list.length"></Aempty>
				<view class="row" v-for="(item, index) in order_list" :key="index">
					<view class="type-view clearfix" @click="goPage('/pages/order/orderDetail?id=' + item.id)">
						<text class="float_left">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
						<text class="float_right type primary-color">{{ item.orderStatusMsg }}</text>
					</view>
					<view @click="goPage('/pages/order/orderDetail?id=' + item.id)">
						<view class="order-info" v-for="(row, indexO) in item.lists" :key="indexO">
							<view class="left"><image :src="row.images"></image></view>
							<view class="right">
								<view class="name">{{ row.title }}</view>
								<view class="spec">
									<view class="spec-li">
										<text v-for="(sku, ins) in row.specGroup" :key="ins">{{ sku.specValueName }};</text>
									</view>
								</view>
								<view class="price-number clearfix">
									<view class="now-price float_left">
										￥
										<text v-if="Number(row.activityPrice) > 0">{{ row.activityPrice }}</text>
										<text v-else>{{ row.salePrice }}</text>
									</view>
									<view class="number float_right">
										<u-icon name="close" size="18"></u-icon>
										<text>{{ row.buyNum }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="detail" @click="goPage('/pages/order/orderDetail?id=' + item.id)">
						<view class="number">共{{ item.lists.length }}件商品，</view>
						<view class="number" v-if="Number(item.expressMoney) > 0">运费{{ item.expressMoney }}元，</view>
						<view class="number" v-if="Number(item.preferentialMoney) > 0">优惠{{ item.preferentialMoney }}元，</view>
						<view class="sum">
							合计￥
							<view class="price">{{ item.payMoney }}</view>
						</view>
					</view>
					<view class="btns">
						<block v-if="item.orderStatus === 2">
							<view class="default" @click="cancelOrder(item.id)">取消订单</view>
							<view class="pay primary-btn-pain" @click="toPayment(item.no)">立即付款</view>
						</block>
						<block v-if="item.orderStatus === 3"><view class="default" @click="remindDeliver(item.id)">提醒发货</view></block>
						<block v-if="item.orderStatus === 4">
							<view class="default" @click="showLogistics(item.id)">查看物流</view>
							<view class="pay primary-btn-pain" @click="finishOrder(item.id)">确认收货</view>
							<!-- <view class="pay primary-btn-pain">我要退货</view> -->
						</block>
						<!-- <block v-if="item.orderStatus === 5">
							<view class="default">评价</view>
							<view class="default">再次购买</view>
						</block> -->
					</view>
				</view>
			</view>
			<u-loadmore v-if="order_list.length" :status="load_status" />
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			load_status: 'loadmore',
			headerPosition: 'fixed',
			headerTop: '0px',
			// 订单状态 默认 2待支付 3代发货 4待收货 5已完成 6已关闭
			orderType: [
				{
					status: 0,
					label: '全部'
				},
				{
					status: 2,
					label: '待付款'
				},
				{
					status: 3,
					label: '待发货'
				},
				{
					status: 4,
					label: '待收货'
				},
				{
					status: 5,
					label: '已完成'
				}
			],
			//订单列表 演示数据
			order_list: [],
			tabbarIndex: 0,
			page: 1,
			pageSize: 10,
			pageTotal: 0
		};
	},
	onLoad(option) {
		//option为object类型，会序列化上个页面传递的参数
		this.tabbarIndex = option.tbIndex ? parseInt(option.tbIndex) : 0;
		//兼容H5下排序栏位置
		// #ifdef H5
		let Timer = setInterval(() => {
			let uniHead = document.getElementsByTagName('uni-page-head');
			if (uniHead.length > 0) {
				this.headerTop = uniHead[0].offsetHeight + 'px';
				clearInterval(Timer); //清除定时器
			}
		}, 1);
		// #endif
	},
	onShow() {
		this.getList();
	},
	onPullDownRefresh() {
		this.getList();
	},
	onPageScroll(e) {
		return;
		//兼容iOS端下拉时顶部漂移
		this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
	},
	methods: {
		// 立即支付
		toPayment(no) {
			// payType===1 是微信支付
			this.$u.api
				.rePay({
					payType: 1,
					no: no
				})
				.then(({ data }) => {
					// 微信小程序，微信支付
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: res => {
							this.$u.toast('支付成功');
							this.getList();
						},
						fail: err => {
							this.$u.toast('支付失败');
						}
					});
				});
		},
		// 获取列表
		getList() {
			this.loadStatus = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize
			};
			switch (this.tabbarIndex) {
				case 0:
					break;
				case 1:
					params.payStatus = 4;
					params.orderStatus = 2;
					break;
				case 2:
					params.orderStatus = 3;
					break;
				case 3:
					params.orderStatus = 4;
					break;
				case 4:
					params.orderStatus = 5;
					break;
			}
			this.$u.api.orderList(params).then(({ data, pageTotal }) => {
				uni.stopPullDownRefresh();
				this.pageTotal = pageTotal;
				if (this.page === 1) {
					this.order_list = data;
				} else {
					this.order_list = this.order_list.concat(data);
				}

				this.load_status = this.$utils.loadStatus(this.order_list, pageTotal);
			});
		},
		// 导航切换
		showType(tbIndex) {
			this.tabbarIndex = tbIndex;
			this.page = 1;
			this.getList();
			// this.list = this.orderList[tbIndex];
		},
		// 查看物流
		showLogistics(row) {},
		// 已提醒商家发货
		remindDeliver(row) {
			uni.showToast({
				title: '已提醒商家发货'
			});
		},
		// 取消订单
		cancelOrder(id) {
			uni.showModal({
				title: '取消订单',
				content: '确定取消此订单？',
				success: res => {
					if (res.confirm) {
						this.$u.api.cancelOrder(id).then(res => {
							this.$u.toast('订单已取消');
							this.getList();
						});
					}
				}
			});
		},
		finishOrder(id) {
			uni.showModal({
				title: '确认收货',
				content: '确定要确认收货吗？',
				success: res => {
					if (res.confirm) {
						this.$u.api.finishOrder(id).then(res => {
							this.$u.toast('收货成功');
							this.getList();
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f3f3;
}
.topTabBar {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #ffffff;
	height: 80upx;
	display: flex;
	justify-content: space-around;
	.grid {
		width: 20%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #444;
		font-size: 26upx;
		.text {
			height: 76upx;
			display: flex;
			align-items: center;
			&.on {
				font-size: 28upx;
				color: $price-color;
				border-bottom: solid 4upx $price-color;
			}
		}
	}
}
.order-list {
	margin-top: 80upx;
	padding-top: 20upx;
	width: 100%;
	.list {
		width: 94%;
		margin: 0 auto;
		.onorder {
			width: 100%;
			height: 50vw;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			image {
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}
			.text {
				width: 100%;
				height: 60upx;
				font-size: 28upx;
				color: #444;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.row {
			padding: 10upx 20upx;
			border-radius: 10upx;
			background-color: #fff;
			margin-bottom: 20upx;
			.type-view {
				height: 86upx;
				line-height: 86upx;
				font-size: 24upx;
				color: #999999;
				.type {
					color: $price-color;
					font-size: 26upx;
				}
			}

			.order-info {
				padding-bottom: 26upx;
				width: 100%;
				display: flex;
				.left {
					flex-shrink: 0;
					image {
						width: 160upx;
						height: 160upx;
						border-radius: 10upx;
					}
				}
				.right {
					width: 100%;
					margin-left: 20upx;
					position: relative;
					.name {
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.spec {
						color: #999999;
						font-size: 22upx;
						padding: 10upx 0;
						.spec-li {
							display: inline-block;
							border-radius: 36upx;
							height: 36upx;
							line-height: 32upx;
						}
					}
					.price-number {
						position: absolute;
						bottom: 0;
						width: 100%;
						color: #333;
						.now-price {
							color: $price-color;
							font-size: 24upx;
							text {
								font-weight: bold;
								font-size: 32upx;
							}
						}
						.number {
							text {
								font-size: 32upx;
							}
						}
					}
				}
			}
			.detail {
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				font-size: 24upx;
				.sum {
					padding: 0 8upx;
					display: flex;
					align-items: flex-end;
					.price {
						font-size: 32upx;
						font-weight: bold;
					}
				}
			}
			.btns {
				padding: 20upx 0;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				view {
					font-size: 24upx;
					min-width: 120upx;
					height: 50upx;
					padding: 0 20upx;
					border-radius: 10upx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 20upx;
				}
				.default {
					border: solid 1upx #ccc;
					color: #333;
				}
				.pay {
					border: solid 1upx $price-color;
					color: $price-color;
				}
			}
		}
	}
}
</style>
